<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wh_wh-button</title>
    <link href="fonts/sIcon.min.css" rel="stylesheet">
    <link href="wh-btn.min.css" rel="stylesheet">
    <style>
        body{
            background: #e2e2e2;
        }
        body, wh-button, input, select, textarea {
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
        }
        .box{
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 3px hsla(0,0%,4%,.1), 0 0 0 1px hsla(0,0%,4%,.1);
            display: block;
            padding: 20px;
            margin: 10px 0;
        }
        .box div{
            margin: 10px;
            min-height: 60px;
        }
        .title  , .subtitle{
            color: #363636;
            font-size: 28px;
            line-height: 1;
            font-weight: 300;
            word-break: break-word;
            margin-top: 0;
        }
        .notification.wh-primary {
            background-color: #00d1b2;
            color: #fff;
        }
        .notification {
            background-color: #f5f5f5;
            border-radius: 3px;
            padding: 16px 20px;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2 class="title">types</h2>
        <div>
            <button class="wh-button">button</button>
            <button class="wh-button wh-white">wh-white</button>
            <button class="wh-button wh-light">wh-light</button>
            <button class="wh-button wh-dark">wh-dark</button>
            <button class="wh-button wh-black">wh-black</button>
            <button class="wh-button wh-link">wh-link</button>
        </div>
        <div>
            <button class="wh-button wh-primary">primary</button>
            <button class="wh-button wh-info">info</button>
            <button class="wh-button wh-success">success</button>
            <button class="wh-button wh-warning">warning</button>
            <button class="wh-button wh-danger">danger</button>
        </div>
    </div>
    <div class="box">
        <h2 class="title">size</h2>
        <div>
            <button class="wh-button wh-small">small</button>
            <button class="wh-button">normal</button>
            <button class="wh-button wh-medium">medium</button>
            <button class="wh-button wh-large">large</button>
        </div>
    </div>
    <div class="box">
        <h2 class="title">style</h2>
        <div>
            <h2 class="subtitle">动态背景色</h2>
            <a class="wh-button wh-outlined">Outlined</a>
            <a class="wh-button wh-primary wh-outlined">Outlined</a>
            <a class="wh-button wh-info wh-outlined">Outlined</a>
            <a class="wh-button wh-success wh-outlined">Outlined</a>
            <a class="wh-button wh-danger wh-outlined">Outlined</a>
        </div>
        <div>
            <h2 class="title">有背景色</h2>
            <div class="notification wh-primary">
                <a class="wh-button wh-primary wh-inverted">Inverted</a>
                <a class="wh-button wh-info wh-inverted">Inverted</a>
                <a class="wh-button wh-success wh-inverted">Inverted</a>
                <a class="wh-button wh-danger wh-inverted">Inverted</a>
            </div>
        </div>
    </div>
    <div class="box">
        <h2 class="title">state</h2>
        <div>
            <h2 class="subtitle">loading</h2>
            <a class="wh-button wh-loading">Loading</a>
            <a class="wh-button wh-primary wh-loading">Loading</a>
            <a class="wh-button wh-info wh-loading">Loading</a>
            <a class="wh-button wh-success wh-loading">Loading</a>
            <a class="wh-button wh-warning wh-loading">Loading</a>
            <a class="wh-button wh-danger wh-loading">Loading</a>
        </div>
        <div>
            <h2 class="title">disabled</h2>
            <a class="wh-button wh-disabled">disabled</a>
            <a class="wh-button wh-primary wh-disabled">disabled</a>
            <a class="wh-button wh-info wh-disabled">disabled</a>
            <a class="wh-button wh-success wh-disabled">disabled</a>
            <a class="wh-button wh-warning wh-disabled">disabled</a>
            <a class="wh-button wh-danger wh-disabled">disabled</a>
        </div>
        <div>
            <h2 class="title">icon buttons</h2>
            <a class="wh-button wh-large">
                <span class="icon">
                    <i class="github icon"></i>
                </span>
                <span>GitHub</span>
            </a>
            <a class="wh-button wh-primary wh-medium">
                <span class="icon"><i class="twitter icon"></i></span>
                <span>Twitter</span>
            </a>
            <a class="wh-button wh-success">
                <span class="icon">
                    <i class="check icon"></i>
                </span>
                <span>Save</span>
            </a>
            <a class="wh-button wh-danger wh-small">
                <span>Delete</span>
                <span class="icon">
                    <i class="remove icon"></i>
                </span>
            </a>
            <a class="wh-button wh-danger wh-outlined wh-small">
                <span class="icon">
                    <i class="remove icon"></i>
                </span>
                <span data-v-22d973ae="">Delete</span>
            </a>
        </div>
        <div>
            <h2 class="title">btn group</h2>
            <div class="wh-button-group">
                <button class="wh-button">
                    <i class="add to cart icon"></i>
                </button>
                <button class="wh-button">
                    <i class="cloud upload icon"></i>
                </button>
                <button class="wh-button">
                    <i class="configure icon"></i>
                </button>
            </div>
        </div>
    </div>
</body>
</html>